<style lang='scss' scoped>
.base-tree {
  overflow-y: auto;
  min-height: 50vh;
  height: 50vh;
  max-height: 50vh;
  border: 0px;

  .tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
}
</style>

<template>
  <div class="base-tree">
    <el-tree
      v-loading="loading"
      :show-checkbox="showCheckbox"
      :draggable="draggable"
      ref="tree"
      :data="data"
      node-key="id"
      :expand-on-click-node="false"
      @node-click="nodeClick"
      :filter-node-method="filterNode"
    >
      <span v-if="editable" class="tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button type="text" size="mini" @click.stop="() => append(data)">新增</el-button>
          <el-button type="text" size="mini" @click.stop="() => remove(node, data)">删除</el-button>
        </span>
      </span>
    </el-tree>
  </div>
</template>

<script>
export default {

  props: {

    editable: {
      type: Boolean,
      default: true
    },

    action: {
      type: String,
      default: 'save'
    },
    showCheckbox: {
      type: Boolean,
      default: true
    },
    draggable: {
      type: Boolean,
      default: true
    },

    url: {
      type: String,
      default: null
    }
  },

  data () {
    return {
      data: [],

      baseURL: '/api/menu',

      fields: [
        {
          field: 'menuId',
          name: '菜单ID'
        },
        {
          field: 'menuName',
          name: '菜单名称'
        },
        {
          field: 'parentMenuId',
          name: '父菜单ID'
        },
        {
          field: 'menuUrl',
          name: '菜单地址'
        },
        {
          field: 'sort',
          name: '排序'
        },
        {
          field: 'visible',
          name: '是否可见',
          type: 'select',
          codeType: 'yesOrNo'
        }
      ],
      filterText: '',
      loading: false
    }
  },

  watch: {
    filterText (val) {
      this.$refs.tree.filter(val)
    }
  },

  mounted () {
    this.load()
  },

  methods: {

    filterNode (value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },

    submit () {
      this.$post(this.baseURL + '/' + this.action, this.formData).then(data => {
        if (data.success) {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.load()
        } else {
          this.$message.error('操作失败')
        }
      })
    },

    load () {
      this.loading = true
      this.$post(this.url, {}).then(data => {
        const rows = data
        this.data = rows
        this.loading = false
      })
    },

    nodeClick (obj, node, comp) {
      this.action = 'update'
      this.formData = obj.attributes
    },

    append (data) {
      this.$message({
        message: '右侧编辑新建菜单内容',
        showClose: true,
        type: 'info'
      })
      this.action = 'save'
      if (data === undefined) {
        this.formData = {
          menuId: '',
          menuName: '',
          parentMenuId: '',
          menuUrl: '',
          sort: '',
          field: ''
        }
      } else {
        const itemData = data.attributes
        const menuId = itemData.menuId
        this.formData = {
          menuId: '',
          menuName: '',
          parentMenuId: menuId,
          menuUrl: '',
          sort: '',
          field: ''
        }
      }
    },

    remove (node, data) {
      this.$confirm('是否删除该菜单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$post(this.baseURL + '/delete', data.attributes).then(data => {
          if (data.success) {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.load()
          } else {
            this.$message.error('删除失败')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}

</script>
